<template>
  <div class="pingfen_page">
    <van-nav-bar title="评分" left-arrow @click-left="onClickLeft" />

    <!-- 订单信息 -->
    <div class="order_info">
      <div class="title">订单信息</div>
      <div class="info">
        <div class="info_son">
          <p>商品</p>
          <p>{{dataObj.prodName}}</p>
        </div>
        <div class="info_son">
          <p>发货时间</p>
          <p>{{dataObj.sendTime}}</p>
        </div>
        <div class="info_son">
          <p>到达时间</p>
          <p>{{dataObj.receiveTime}}</p>
        </div>
      </div>
    </div>

    <!-- 服务评价 -->
    <div class="order_info serve">
      <div class="title">服务评价</div>
      <div class="info">
        <div class="info_son">
          <p>描述相符</p>
          <div class="start">
      
            <div v-for="(item,index) in dataObj.prodConformityPoint" :key="index"><img :src="require('../Order/../../assets/images/order/pingfen_y.png')" alt=""></div>

   <div><img :src="require('../Order/../../assets/images/order/pingfen.png')" alt=""></div>


          </div>
          
          <p>{{dataObj.prodConformityPoint*2}}分</p>
        </div>
        <div class="info_son">
          <p>物流速度</p>
          <div class="start">
            <div v-for="(item,index) in dataObj.logisticsSpeedPoint" :key="index"><img :src="require('../Order/../../assets/images/order/pingfen_o.png')" alt=""></div>
             <div><img :src="require('../Order/../../assets/images/order/pingfen.png')" alt=""></div>
              <div><img :src="require('../Order/../../assets/images/order/pingfen.png')" alt=""></div>
               <div><img :src="require('../Order/../../assets/images/order/pingfen.png')" alt=""></div>
          </div>
             <p>{{dataObj.logisticsSpeedPoint*2}}分</p>
        </div>
        <div class="info_son">
          <p>服务质量</p>
          <div class="start">
            <div v-for="(item,index) in dataObj.serviceQualityPoint" :key="index"><img :src="require('../Order/../../assets/images/order/pngfen_r.png')" alt=""></div>
             <div><img :src="require('../Order/../../assets/images/order/pingfen.png')" alt=""></div>
          </div>
           <p>{{dataObj.serviceQualityPoint*2}}分</p>
        </div>
      </div>
    </div>

    <!-- 填写评论 -->
    <div class="liuyan">
      <textarea name="" placeholder="请填写评论" v-model="commit"></textarea>
    </div>

    <!-- 底部提交 -->
    <div class="foot">
      <div class="btn">
        <p @click="submit">提交评论</p>
      </div>
    </div>
  </div>
</template>

<script>
import {PingjiaDetailApi,dingdanApi } from "../../request/api";
export default {
  data(){
    return {
      dataObj:{},
      commit:'',
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    submit(){
      console.log(1);
      this.$router.back();
    }
  },
  created(){
    PingjiaDetailApi(this.$route.params.serialNo).then(res=>{
      console.log(res);
      this.dataObj = res.data;
      this.commit = res.data.comment;
    })
    // dingdanApi({
    //     serialNo:this.$route.params.serialNo,
    //     prodConformityPoint:4,
    //     logisticsSpeedPoint:2,
    //     serviceQualityPoint:4,
    //     comment:'好！',
    //   }).then(res=>{
    //     console.log(res);
    //   })
  }
};
</script>

<style lang="less">
.pingfen_page {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}
.van-nav-bar {
  width: 100%;
  background-color: #039;
  .van-nav-bar__left {
    color: #fff;
    font-size: 20px;
  }
  .van-nav-bar__title {
    color: #fff;
    font-size: 20px;
  }
}
.order_info {
  margin-bottom: 10px;
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  .title {
    width: 100%;
    height: 34px;
    line-height: 34px;
    background-color: #f5fafe;
  }
  .info {
    .info_son {
      height: 23px;
      line-height: 23px;
      display: flex;
      margin: 10px 0;
      p {
        &:nth-of-type(1) {
          width: 30%;
        }
      }
    }
  }
}
.serve {
  margin-bottom: 20px;
  .start {
    display: flex;
    margin-right: 15px;
    div {
      width: 27px;
      height: 27px;
      // border: 1px solid #000;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
  }
  p{
    color: #999;
  }
}

.liuyan {
  textarea {
    outline: none;
    border: 0;
    width: 100%;
    height: 150px;
    padding:10px;
    box-sizing: border-box;
  }
}
.foot {
  width: 100%;
  height: 88px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn {
    width: 347px;
    height: 44px;
    background-color: #039;
    border-radius: 22px;
    line-height: 44px;
    text-align: center;
    color: #fff;
  }
}
</style>